<script setup lang="ts">
import { computed } from "vue"
import { Select, SelectProps } from "ant-design-vue"
import { useComputedBordered } from "@/composables/input-bordered"
import { useFormItemClientWidth } from "../form-item"

export interface Props {
  bordered?: boolean
  placement?: SelectProps["placement"]
  allowClear?: boolean
  placeholder?: string
}

const model = defineModel<SelectProps["value"]>(undefined)

const props = withDefaults(defineProps<Props>(), {
  bordered: false,
  placement: "bottomRight",
  placeholder: "请选择",
  allowClear: true,
})

const computedProps = computed<Omit<SelectProps, "value">>(() => {
  const result = { ...props } as any
  delete result.value
  delete result["onUpdate:value"]
  return result
})

const { computedBordered } = useComputedBordered(props)

const slots = defineSlots<InstanceType<typeof Select>["$slots"]>()

const formItemClientWidth = useFormItemClientWidth()
</script>

<template>
  <Select
    v-model:value="model"
    v-bind="computedProps"
    :bordered="computedBordered"
    :placement="props.placement"
    :allowClear="props.allowClear"
    :placeholder="props.placeholder"
    :dropdownMatchSelectWidth="formItemClientWidth"
  >
    <template v-for="(_, key) in slots" :key="key" #[key]="params">
      <slot :name="key" :key="key" v-bind="params"></slot>
    </template>
  </Select>
</template>
